<template>
	<view class="container">
		<!-- 导航栏 -->
		<view class="navbar">
			<nav-bar title="模型定制化" :backIcon="false" bgColor="#f3f4f6"></nav-bar>
		</view>

		<!-- 搜索框 -->
		<view class="hearder">
			<view class="header-left-icon">
				<u-icon name="list" :size="28"></u-icon>
			</view>
			<view class="search">
				<u-search v-model="searchText" :show-action="false" borderColor="rgb(230, 230, 230)"
					bgColor="#fff"></u-search>
			</view>
			<view class="header-right-icon">
				<u-icon name="more-dot-fill" :size="28"></u-icon>
			</view>
		</view>

		<!-- 轮播图 -->
		<view class="swiper">
			<u-swiper :list="swiperList" @change="e => current = e.current" :autoplay="true">
				<view slot="indicator" class="indicator">
					<view class="indicator__dot" v-for="(item, index) in swiperList" :key="index"
						:class="[index === current && 'indicator__dot--active']">
					</view>
				</view>
			</u-swiper>
		</view>

		<!-- 分类 -->
		<!-- <view class="classification">
			<u-grid :border="true" col="4">
				<u-grid-item v-for="(listItem,listIndex) in list" :key="listIndex"
					customStyle="padding-top: 10px; padding-bottom: 10px">
					<u-icon :customStyle="{paddingTop:20+'rpx'}" :name="listItem.name" :size="22"></u-icon>
					<text class="grid-text">{{listItem.title}}</text>
				</u-grid-item>
			</u-grid>
		</view> -->

		<!-- 通知 -->
		<view class="notice">
			<u-notice-bar :text="notice"></u-notice-bar>
		</view>

		<!-- 商品展示 -->
		<view class="container">
			<custom-waterfalls-flow ref="waterfallsFlowRef" :value="flowList" @imageClick="imageClick"
				@wapperClick="wapperClick">
				<!-- #ifdef MP-WEIXIN -->
				<view class="item" v-for="(item,index) in flowList" :key="index" slot="slot{{index}}">
					<view class="title">{{item.title}}</view>
					<view class="desc">{{item.desc}}</view>
				</view>
				<!-- #endif -->
				<!-- #ifndef MP-WEIXIN -->
				<template v-slot:default="item">
					<view class="item">
						<view class="title">{{item.title}}</view>
						<view class="desc">{{item.desc}}</view>
					</view>
				</template>
				<!-- #endif -->
			</custom-waterfalls-flow>
		</view>
		<!-- 底部导航 -->
		<!-- <view>
			<tab-bar></tab-bar>
		</view> -->
	</view>
</template>

<script>
	import customWaterFallsFlow from '@/components/custom-waterfalls-flow/custom-waterfalls-flow.vue'
	import {
		getIndex
	} from '@/common/api/login.js'
	export default {
		components: {
			customWaterFallsFlow,
		},
		data() {
			return {
				searchText: '',
				current: 0,
				swiperList: [
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
				],
				flowList: [{
						image: 'https://oss.shop.eduwork.cn/product/2020-0820-5f3e180ea8886.png',
						title: '风扇',
						desc: '描述描述描述描述描述描述描述描述1',
						modelUrl: '/model/fan2.glb',
					},
					{
						image: 'https://oss.shop.eduwork.cn/product/2020-0820-5f3e084e2b714.png',
						title: '蜗牛',
						desc: '描述描述描述描述描述描述描述描述2',
						modelUrl: '/model/snail.glb',
					},
					{
						image: 'https://oss.shop.eduwork.cn/product/2020-0820-5f3e1871194a5.png',
						title: '我是标题3',
						desc: '描述描述描述描述描述描述描述描述3',
						modelUrl: '/model/Soldier.glb',
					},
					{
						image: 'https://via.placeholder.com/200x300.png/9400D3',
						title: '我是标题4',
						desc: '描述描述描述描述描述描述描述描述4',
						modelUrl: '/model/snail3.glb',
					},
					{
						image: 'https://via.placeholder.com/100x240.png/B0E0E6',
						title: '我是标题5',
						desc: '描述描述描述描述描述描述描述描述5',
						modelUrl: '',
					},
					{
						image: 'https://via.placeholder.com/140x280.png/7FFFAA',
						title: '我是标题6',
						desc: '描述描述描述描述描述描述描述描述6',
						modelUrl: '',
					},
					{
						image: 'https://via.placeholder.com/40x60.png/EEE8AA',
						title: '我是标题7',
						desc: '描述描述描述描述描述描述描述描述7',
						modelUrl: '',
					}
				],
				list: [{
						name: 'photo',
						title: '玩具'
					},
					{
						name: 'lock',
						title: '手办'
					},
					{
						name: 'star',
						title: '人物'
					},
					{
						name: 'hourglass',
						title: '日常用品'
					},
				],
				notice: "走进模型的世界，领略无限风光的奥秘！感受模型的独特魅力，激发你的创造力！创造属于你的小世界，用模型记录精彩！",
			}
		},
		onLoad() {
			// 全局API请求
			// this.$u.api.index({page: 1}).then(res => {
			// 	console.log(res)
			// }).catch(e =>{
			// 	console.log(e)
			// })

			// 局部API请求
			// getIndex({page: 1}).then(res => {
			// 	console.log(res)
			// }).catch(e =>{
			// 	console.log(e)
			// })
		},
		methods: {
			imageClick(item) {
				uni.navigateTo({
					url: '/pages/detail/index?modelUrl=' + item.modelUrl,
				});
			},
			wapperClick(item) {
				console.log('商品点击事件', item)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.navbar{
		margin-bottom: 20rpx;
	}
	.hearder {
		display: flex;
		width: 100%;
		margin-top: 20rpx;
		margin-bottom: 30rpx;
		justify-content: center;
		align-items: center;

		.header-left-icon {
			margin-left: 20rpx;
			margin-right: 60rpx;
		}
		.search {
			flex: 1;
			box-sizing: border-box;
		}
		.header-right-icon {
			margin-left: 60rpx;
			margin-right: 40rpx;
		}
	}

	.swiper {
		width: 100%;
		padding: 40rpx 20rpx;
		box-sizing: border-box;

		.indicator {
			@include flex(row);
			justify-content: center;

			&__dot {
				height: 6px;
				width: 6px;
				border-radius: 100px;
				background-color: rgba(255, 255, 255, 0.35);
				margin: 0 5px;
				transition: background-color 0.3s;

				&--active {
					background-color: #ffffff;
				}
			}
		}
	}
	
	.classification {
		margin: 20rpx 20rpx 20rpx 20rpx;
	}

	.notice {
		padding: 40rpx 10rpx;
	}
</style>